<template>
  <div class="view-board">
    <div class="header" v-if="menuTree.length > 1">
      <el-menu
        class="cover-menu"
        mode="horizontal"
        :default-active="defaultActive"
        @select="(v) => menuChange(v, true)"
      >
        <template v-for="item in menuTree">
          <el-menu-item :index="item.id" :key="item.id">
            <div class="menu-name">{{ item.name }}</div>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <div :class="menuTree.length > 1 ? 'spacing' : 'single-spacing'"></div>
    <div
      :class="menuTree.length > 1 ? 'body' : 'bodyAll'"
      v-loading="isLoading"
    >
      <preview-view-board
        :configData="configData"
        :id="componentId"
        ref="container"
        isPreview
      ></preview-view-board>
    </div>
  </div>
</template>

<script>
import BaseList from "@/mixins/BaseList";
import PreviewViewBoard from "@/views/screenConfig/viewBoard/components/components/preview";
import { mapGetters } from "vuex";
import { getAllTree, getInfo } from "@/api/screenConfig/viewboard";
import { getSingleArray } from "@/utils/util";

export default {
  mixins: [BaseList],
  components: { PreviewViewBoard },
  data() {
    return {
      componentId: "",
      defaultActive: "0",
      menuTree: [],
      isLoading: false,
      parameterArr: [],
      menuNames: [],
      allMenuList: [],
      configData: undefined,
    };
  },

  computed: {
    ...mapGetters(["defaultRoutes"]),
  },

  mounted() {
    let currentPathData = this.getCurrentPath(
      this.$route.path,
      this.defaultRoutes
    )[0];

    if (currentPathData.parameter) {
      this.parameterArr = currentPathData.parameter.split(",");
      this.queryAllTree();
    }

    // this.parameterArr = ["1477875576875794614,1477875576875794612"];
    // this.queryAllTree();
  },

  methods: {
    getCurrentPath(currentVal, list) {
      let data;
      (list || []).map((item) => {
        if (item.fullPath === currentVal) {
          data = [item];
        } else {
          const child = this.getCurrentPath(currentVal, item.children);
          if (child) {
            data = child;
          }
        }
      });
      return data;
    },

    queryAllTree() {
      getAllTree({ status: 0 }).then((res) => {
        if (res && res.code === 200) {
          this.menuTree = [];

          let singleArr = getSingleArray(res.data);
          this.parameterArr.forEach((id) => {
            singleArr.forEach((item) => {
              if (id === item.id) {
                this.menuTree.push({ id: id, name: item.name });
              }
            });
          });
          // this.menuTree = [
          //   { id: "1477875576875794614", name: "test22" },
          //   { id: "1477875576875794612", name: "test11" },
          // ];

          this.menuChange(this.menuTree[0].id);
        } else {
          this.menuTree = [];
        }
      });
    },

    menuChange(v) {
      this.defaultActive = v;
      this.componentId = v;

      this.initData();
    },

    initData() {
      getInfo({ id: this.componentId }).then((res) => {
        if (res && res.code === 200) {
          try {
            this.configData = JSON.parse(res.data.chartConfig);
          } catch (e) {
            console.err("转换异常: ", e);
            this.configData = null;
          }
        } else {
          this.$GlobalErrorConfirm("获取数据失败", res.msg, "重新加载").then(
            () => {
              this.initData(id);
            }
          );
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.view-board {
  height: 100%;
  .header {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    line-height: 50px;
    background-color: #fff;
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
    .cover-menu {
      height: 100%;
      border-right: 0 !important;
      user-select: none;

      ::v-deep .el-menu-item {
        height: 50px !important;
        line-height: 50px !important;
      }
    }
  }
  .spacing {
    height: 12px;
    background: #eee;
  }
  .single-spacing {
    height: 4px;
    background: #eee;
  }
  .body {
    height: calc(100% - 62px);
    overflow-y: scroll;
  }
  .bodyAll {
    height: 100%;
    overflow-y: scroll;
  }
}
</style>
